import { DownOutlined } from "@ant-design/icons";
import styles from "@styles/components/dropdown.module.less";

import React, { useEffect, useState } from "react";
import { Menu, Dropdown, Button } from "antd";

import ModalBox from "@components/modal/modal_user";
import cookie from "react-cookies";

export default function ShowDropdown() {
  const [modalbox, setModalbox] = useState({
    userInfo: false,
    resetpwd: false,
    signout: false,
  });
  const [userinfo, setUserinfo] = useState({});

  useEffect(() => {
    setUserinfo(cookie.load("userInfo"));

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // 对象赋值 true / false
  const fil = (o, t) => ({ ...modalbox, ...{ [o]: t ? t : false } });

  // 开启 / 关闭 弹窗
  const openCloseModal = (type, bool = false) => setModalbox(fil(type, bool));

  const menu = (
    <Menu className={styles.dropdownlist}>
      <Menu.Item key="0">
        <Button
          type="link"
          block
          onClick={() => openCloseModal("userInfo", true)}
        >
          {userinfo && userinfo.userName}
        </Button>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="1">
        <Button
          type="link"
          block
          onClick={() => openCloseModal("resetpwd", true)}
        >
          修改密码
        </Button>
      </Menu.Item>
      <Menu.Item key="3">
        <Button
          type="link"
          block
          onClick={() => openCloseModal("signout", true)}
        >
          退出登录
        </Button>
      </Menu.Item>
    </Menu>
  );
  return (
    <Dropdown overlay={menu} className={styles.dropdown}>
      <div>
        <span
          className={["ant-dropdown-link", styles.dropdownmenu].join(" ")}
          onClick={(e) => e.preventDefault()}
        >
          <img src={userinfo && userinfo.headPortrait} alt="" width="35" />
          <span>{userinfo && userinfo.userName}</span>
          <DownOutlined />
        </span>
        <ModalBox modalbox={modalbox} openCloseModal={openCloseModal} />
      </div>
    </Dropdown>
  );
}
